<template>
  <div class="tool-dom"
    :data-handle="top_advertiser.handle"
    :data-advertisement_id="top_advertiser.advertisement_id ? top_advertiser.advertisement_id : ''"
    data-page_position="Sponsored"
    @click="handleExp"
    v-html="$t('banner_sponsoredBy',{website: top_advertiser.website,name: $websiteName(top_advertiser), category: top_advertiser.categories && top_advertiser.categories.length > 0 ? top_advertiser.categories[0].name : ''})"
    v-if="hasRealVal(top_advertiser) && hasRealVal(top_advertiser.website)"></div>
</template>

<script>
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'SponsoredBy',
  mixins: [mixinsExposure],
  computed: {
    ...mapState({
      top_advertiser: (state) => state.top_advertiser,
    }),
  },
  computed: {
    ...mapState({
      top_advertiser: (state) => state.top_advertiser,
    }),
  },
  mounted() {},
  methods: {
    ...mapActions(['exposure']),
    handleExp: _.throttle(function () {
      let exporeData = this.getExporeData(
        this.top_advertiser,
        null,
        null,
        false,
        {
          target_url: this.top_advertiser.website,
          page_position: 'Sponsored',
        }
      )
      this.exposure({
        ...exporeData,
      })
    }, 2000),
  },
}
</script>